<template>
    <el-dialog :title="$t('msg.申请添加好友')" :visible="visible" top="100px" :modal="true" :center="true" width="430px"
        :show-close="false" append-to-body>
        <div class="dialog_content">
            <el-form label-position="top">
                <el-form-item :label="$t('msg.发送添加朋友申请')">
                    <el-input type="textarea" :placeholder="$t('msg.请输入申请内容')" v-model="applyMsg" maxlength="140"
                        class="item_input">
                    </el-input>
                </el-form-item>
                <el-form-item :label="$t('msg.请输入备注内容')">
                    <el-input v-model="remarkName" :placeholder="$t('msg.请输入备注内容')" class="item_input"></el-input>
                </el-form-item>
                <el-form-item :label="$t('msg.设置朋友权限')">
                    <div class="switch_item" @click="auth = 1">
                        <div class="key">{{ $t('msg.聊天朋友圈') }}</div>
                        <img src="@/assets/image/ok.png" alt="" class="ok_icon" v-if="auth == 1">
                    </div>
                    <div class="switch_item" @click="auth = 2">
                        <div class="key">{{ $t('msg.仅聊天') }}</div>
                        <img src="@/assets/image/ok.png" alt="" class="ok_icon" v-if="auth == 2">
                    </div>
                </el-form-item>
                <el-form-item :label="$t('msg.朋友圈权限')">
                    <div class="switch_item">
                        <div class="key">{{ $t('msg.不让她看') }}</div>
                        <el-switch v-model="hideFromHer"></el-switch>
                    </div>
                    <div class="switch_item">
                        <div class="key">{{ $t('msg.不看她') }}</div>
                        <el-switch v-model="dontSeeHer"></el-switch>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="footer">
            <el-button type="primary" @click="submit">{{ $t('msg.完成') }}</el-button>
            <el-button type="primary" plain @click="$emit('update:visible', false)">{{ $t('msg.取消') }}</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: 'AddFriend',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        member: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            applyMsg: "",
            remarkName: "",

            auth: 1,
            hideFromHer: false, // 不让她看
            dontSeeHer: false, // 不看她
        };
    },
    methods: {
        async submit() {
            let im_id = this.member.user_id;
            let { user } = await this.$api.chatApi.searchUser({
                im_user_id: im_id
            });
            await this.$api.chatApi.applyFriend({
                to_user_id: user.id,
                verify_msg: this.applyMsg,
                remark: this.remarkName,
                not_see_him: this.hideFromHer ? 1 : 0,
                not_see_me: this.dontSeeHer ? 1 : 0,
            });

            this.$api.friendApi.addFriend({
                user_id: im_id,
                remark: this.applyMsg
            }).then((e) => {
                if (e.code == 0) {
                    this.$message({
                        message: this.$t('msg.发送成功'),
                        type: 'success'
                    });
                }
            })
            this.$emit("update:visible", false);
        }
    }
};
</script>
<style lang="scss">
.dialog_content {
    .el-form-item {
        margin-bottom: 16px;

        .el-form-item__label {
            padding: 0 0 8px 0;
        }

        .item_input {
            .el-textarea__inner {
                height: 104px;
                font-size: 16px;
                color: #333333;
                font-weight: 500;
                background: #F5F5F5;
            }

            .el-input__inner {
                height: 52px;
                font-size: 16px;
                color: #333333;
                font-weight: 500;
                background: #F5F5F5;
            }
        }

        .switch_item {
            height: 52px;
            border-radius: 0px 0px 0px 0px;
            border-bottom: 1px solid #EDEDED;
            padding: 0 8px;
            box-sizing: border-box;
            background: #F5F5F5;

            display: flex;
            justify-content: space-between;
            align-items: center;

            .ok_icon {
                width: 24px;
                height: 24px;
            }

            &:first-child {
                border-radius: 8px 8px 0 0;
            }

            &:last-child {
                border-radius: 0 0 8px 8px;
                border-bottom: none;
            }
        }
    }

}

.footer {
    .el-button {
        width: 118px;
        height: 32px;
    }
}
</style>